<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>滑轮</title>
	<style type="text/css">
		html,body {
			margin: 0px;
			padding: 0px;
			height:100%;
			width:100%;
		}

		.nav {
		    display: inline-block;
		    position: fixed;
		    top:40%;
		    right:20px;
		    z-index: 100;
		}

		.nav ul li {
		    display: block;
		    width:14px;
		    height:13px;
		    margin:15px;
		    position: relative;
		}

		.nav ul li a {
		    display: block;
		    position: relative;
		    z-index: 1;
		    width: 100%;
		    height: 100%;
		    cursor: pointer;
		    text-decoration: none;
		}

		.nav ul li span {
		    border-radius: 50%;
		    position: absolute;
		    z-index: 1;
		    height: 6px;
		    width: 6px;
		    border: 0;
		    background: #009f5d;
		    left: 50%;
		    top: 50%;
		    margin: -2px 0 0 -2px;
		    -webkit-transition: all 0.1s ease-in-out;
		    -moz-transition: all 0.1s ease-in-out;
		    -o-transition: all 0.1s ease-in-out;
		    transition: all 0.1s ease-in-out;
		}

		.nav ul li a:hover span {
		    width:12px;
		    height:12px;
		    border-radius: 100%;
		    margin: -2px 0px 0px -4px;
		}

		.nav ul li a span.active {
		    width:15px;
		    height:15px;
		    border-radius: 100%;
		    margin: -2px 0px 0px -6.5px;
		}

		.text {
			position: fixed;
			top: 10px;
			left: 10px;
			padding:15px;
			color:white;
			background: #019fde;
			transition: all 2s ease-out;
			-webkit-transition: all 2s ease-out;
			-moz-transition: all 2s ease-out;
			-o-transition: all 2s ease-out;
			-ms-transition: all 2s ease-out;
		}

		.text.show {
			top: 600px;
			left: 300px;
		}
	</style>
</head>
<body>
<span id="text"></span>
<div class="nav">
	<ul name="nav">
		<li><a><span class="active"></span></a></li>
		<li><a><span></span></a></li>
		<li><a><span></span></a></li>
		<li><a><span></span></a></li>
		<li><a><span></span></a></li>
	</ul>
</div>
</body>
<script type="text/javascript">
	var i = 0,j = 0;
	var pulley = ""; 
	var pulleyLock =  true;
	var text = document.querySelector('#text');
	function change(i) {
		pulley = document.getElementsByName('nav')[0].getElementsByTagName('li')[i].getElementsByTagName('a')[0].querySelector('span');
		return pulley;
	}
	window.onmousewheel = function(e){
		e = e || window.event;
		if((e.wheelDelta > 0 || e.detail > 0 || e.keyCode == 38) && pulleyLock){
			text.classList.add('text');
			text.classList.add('show');
			change(i).classList.remove('active');
			if(i > 0) {
				i--;
			}
			change(i).classList.add('active');
			text.innerText = "焦虑个鬼"+(i+1);
			pulleyLock = false;

        }else if((e.wheelDelta < 0 || e.detail < 0 || e.keyCode == 40) && pulleyLock){
        	text.classList.add('text');
        	text.classList.add('show');
			change(i).classList.remove('active');
			if(i < 4) {
				i++;
			}
			change(i).classList.add('active');
			text.innerText = "焦虑个鬼"+(i+1);
			pulleyLock = false;
        }
	};
	[].forEach.call(document.getElementsByName('nav')[0].querySelectorAll('li'), 
		function(li,item) {
	  	li.addEventListener('click',function(e){
	  		change(i).classList.remove('active');
			change(item).classList.add('active');
			i = item;
			text.classList.add('text');
			text.classList.add('show');
			text.innerText = "焦虑个鬼"+(i+1);
		});
	});

	text.addEventListener("transitionend",function(){
		text.classList.remove('show');
		text.classList.remove('text');
		text.innerText = "";
		pulleyLock = true;
	});

	
</script>
</html>